<template>
  <div class="wrap">
    <!-- 文章详情 -->
    <div class="post" v-if="postData.type == 1">
      <!-- 顶部 -->
      <div class="topper">
        <div class="left">
          <i class="iconfont iconnew iconjiantou2" @click="handleBack"></i>

          <img src="@/assets/logo.png" alt class="png" />
        </div>
        <div class="right">
          <button
            class="followBtn"
            :class="{
              notfollowed:!postData.has_follow
              }"
            @click="changeFollow"
          >{{postData.has_follow?'已关注':'关注'}}</button>
        </div>
      </div>

      <div class="info">
        <h4>{{postData.title}}</h4>
        <span class="author">
          {{postData.user.nickname}}
          <i class="time">{{postData.create_date.split('T')[0]}}</i>
        </span>
        <p class="text" v-html="postData.content"></p>
        <div class="info-like">
          <a
            class="like"
            :class="{
               has_like:postData.has_like
              }"
            @click="changeLike"
            href="javascript:;"
          >
            <!-- 点赞 -->
            <i class="link iconfont icondianzan"></i>
            {{postData.like_length}}
          </a>
          <a class="weixin" href="javascript:;">
            <i class="iconfont iconweixin"></i> 微信
          </a>
        </div>
      </div>
    </div>
    <!-- 视频详情 -->

    <div class="video" v-if="postData.type == 2">
      <div class="video-png">
        <video
          poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
          src="https://video.pearvideo.com/mp4/adshort/20200810/cont-1690974-15317931_adpkg-ad_hd.mp4"
        ></video>
        <span class="startBtn iconfont iconshipin"></span>
      </div>
      <div class="box">
        <div class="wrap">
          <img src="@/assets/2.jpg" alt class="head_png" />
          <span class="author">{{postData.user.nickname}}</span>
        </div>
        <i
          class="followBtn"
          :class="{
              notfollowed:!postData.has_follow
              }"
          @click="changeFollow"
        >{{postData.has_follow?'已关注':'关注'}}</i>
      </div>
      <p class="text">{{postData.title}}</p>
      <div class="info-like">
        <a
          class="like"
          :class="{
               has_like:postData.has_like
              }"
          @click="changeLike"
          href="javascript:;"
        >
          <i class="link iconfont icondianzan"></i>
          {{postData.like_length}}
        </a>
        <a class="weixin" href="javascript:;">
          <i class="iconfont iconweixin"></i> 微信
        </a>
      </div>
    </div>

    <!-- 跟帖 -->
    <div class="follow">
      <h5 class="head">精彩跟帖</h5>
      <div class="follow-up" v-if="commentList.length>0">
        <CommentsParent v-for="item in commentList" :key="item.id" :parentData="item" @clicked="acceptId"/>
     
        <div class="morefollow">
          <button @click="$router.push('/comment?id='+$route.query.id)" class="more">更多跟帖</button>
        </div>
      </div>
      <div v-else class="morefollow">暂无跟帖,强赞沙发</div>
    </div>

    <!-- 底部栏 -->
    <div class="bottom">
      <div class="disable" v-if="isShow == false">
        <input 
         type="text"
         @focus="Onfocus" 
         class="comment"  placeholder="写跟帖"/>
        <div class="box">
          <span class="message iconfont iconpinglun-">
            <i class="num">{{postData.comment_length}}</i>
          </span>
          <span
            class="iconfont iconshoucang"
            :class="{
          collect: postData.has_star
        }"
            @click="changeStar"
          ></span>
          <span class="share iconfont iconfenxiang"></span>
        </div>
      </div>
      <div class="enable" v-if="isShow == true">
         <textarea 
         @blur="Onblur"
         ref="textarea"
         v-model="inputValue"
         class="comment" name id cols="20" rows="1" placeholder="写跟帖"></textarea>
         <button class="sell" @click="sellText">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入评论组件
import CommentsParent from "@/components/comments/CommentsParent";

export default {
  components: {
    CommentsParent,
  },
  data() {
    return {
      commentList: [],
      postData: [],
      pageSize: 3,
      pageIndex: 1,
      isShow: false,
      inputValue:'',
      TextId:''
    };
  },

  created() {
    // 获取动态路由参数
    // console.log(this.$route.query);

    // 文章详情
    // 接口类型:【GET】
    // 接口地址: /post/:id
    // 参数: id
    this.$axios({
      method: "get",
      url: "/post/" + this.$route.query.id,
    }).then((res) => {
      // console.log(res);
      this.postData = res.data.data;
    });

    this.init();
  },

  methods: {
    //关注  取消关注
    changeFollow() {
      //关注
      if (this.postData.has_follow) {
        this.$axios({
          // 取消关注用户
          // 接口类型:【GET】
          // 需要验证:【Authorization 】
          // 接口地址: /user_unfollows/:id
          // 参数: id
          method: "get",
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          // console.log(res.data);
          if (res.data.message == "取消关注成功") {
            // console.log('111');
            this.postData.has_follow = false;
          }
        });
      } else {
        this.$axios({
          // 关注用户
          // 接口类型:【GET】
          // 需要验证:【Authorization 】
          // 接口地址: /user_follows/:id
          // 参数: id
          method: "get",
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          // console.log(res.data);
          if (res.data.message == "关注成功") {
            // console.log('222');
            this.postData.has_follow = true;
          }
        });
      }
    },

    // 点赞与取消点赞同一接口
    changeLike() {
      // 点赞文章
      // 接口类型:【GET】
      // 需要验证:【Authorization 】
      // 接口地址: /post_like/:id
      // 参数: id

      this.$axios({
        method: "get",
        url: "/post_like/" + this.postData.id,
      }).then((res) => {
        console.log(res);
        if (res.data.message == "点赞成功") {
          this.postData.like_length += 1;
          this.postData.has_like = true;
        } else {
          this.postData.like_length -= 1;
          this.postData.has_like = false;
        }
      });
    },

    // 收藏文章
    changeStar() {
      // 收藏文章
      // 接口类型:【GET】
      // 需要验证:【Authorization 】
      // 接口地址: /post_star/:id
      // 参数 : id

      this.$axios({
        method: "get",
        url: "/post_star/" + this.postData.id,
      }).then((res) => {
        console.log(res);
        if (res.data.message == "收藏成功") {
          this.postData.has_star = true;
        } else {
          this.postData.has_star = false;
        }
      });
    },

    // 发布评论
     sellText(){
    // 发布评论
    // 接口类型:【POST】
    // 需要验证:【Authorization 】
    // 接口地址: /post_comment/:id
    // 参数 : :id(文章id)   content(评论内容) parent_id(回复id)

      //  console.log('点击了');
      //  console.log(this.textId);
      //  console.log(this.$route.query.id);
      //  console.log(this.inputValue);
       this.$axios({
         method:'post',
         url:'/post_comment/'+this.$route.query.id,
         data:{
            content: this.inputValue,
            parent_id: this.textId
         }
       })
       .then(res=>{
        //  console.log('点击了');
        //  console.log(res);
         this.init();
         this.inputValue='';
         this.isShow = false;
         document.querySelector(".head").scrollIntoView();
       })

    },

    // 聚焦到文本框
     Onfocus(){
       this.isShow = true
       this.$nextTick(()=>{
                this.$refs.textarea.focus()
            })
     },

    // 失去焦点 
     Onblur(){
       setTimeout(()=>{
         this.isShow = false
       },1000)
     },

    // 获取评论列表
    init(){
    // 评论列表
    // 接口类型:【GET】
    // 接口地址:/post_comment/:id
    // 参数 : id
    this.$axios({
      method: "get",
      params: {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
      },
      url: "/post_comment/" + this.$route.query.id,
    }).then((res) => {
      // console.log(res);
      this.commentList = [...res.data.data];
    });
    },
    
    // 监测子组件的事件  接收回复id
    acceptId(id){
      //  console.log(id);
      this.textId = id;
      this.Onfocus();
    },

    handleBack(){
       this.$router.back();
    }
  },
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;

  //文章
  .post {
    width: 100%;
    .topper {
      padding: 0 20/360 * 100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 50/360 * 100vw;
      .left {
        display: flex;
        align-items: center;
        .png {
          height: 50/360 * 100vw;
        }
      }

      .followBtn {
        width: 60/360 * 100vw;
        height: 30/360 * 100vw;
        font-size: 14/360 * 100vw;
        color: #afafaf;
        border: transparent;
        border-radius: 15/360 * 100vw;
        &.notfollowed {
          background-color: red;
          color: white;
        }
      }
    }

    .info {
      padding: 0 20/360 * 100vw;
      .author {
        display: block;
        margin-top: 5/360 * 100vw;
        font-size: 12/360 * 100vw;
        color: #afafaf;
      }
      .time {
        margin-left: 20/360 * 100vw;
      }
      .text {
        width: 100%;
        margin-top: 20/360 * 100vw;
        line-height: 25/360 * 100vw;
        font-size: 14/360 * 100vw;
        /deep/ img {
          max-width: 100%;
        }
      }

      .info-like {
        display: flex;
        margin: 40/360 * 100vw -20/360 * 100vw 0;
        padding-bottom: 20/360 * 100vw;
        justify-content: space-around;
        border-bottom: 5/360 * 100vw solid #efefef;
        .like {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60/360 * 100vw;
          height: 30/360 * 100vw;
          font-size: 12/360 * 100vw;
          border: 1/360 * 100vw solid #afafaf;
          border-radius: 15/360 * 100vw;
          &.has_like {
            color: red;
          }
          .link {
            font-size: 14/360 * 100vw;
          }
        }

        .weixin {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 70/360 * 100vw;
          height: 30/360 * 100vw;
          font-size: 12/360 * 100vw;
          border: 1/360 * 100vw solid #afafaf;
          border-radius: 15/360 * 100vw;
          i {
            color: green;
          }
        }
      }
    }
  }

  //视频
  .video {
    width: 100%;
    .video-png {
      position: relative;
      width: 100%;
      height: 200/360 * 100vw;
      background-color: pink;
      video {
        width: 100%;
        height: 200/360 * 100vw;
      }
      .startBtn {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -25/360 * 100vw;
        margin-top: -25/360 * 100vw;
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        background: rgba(44, 42, 42, 0.4);
        font-size: 50/360 * 100vw;
        color: #fff;
        text-align: center;
        line-height: 50/360 * 100vw;
        border-radius: 50%;
      }
    }
    .box {
      display: flex;
      margin-top: 10/360 * 100vw;
      align-items: center;
      justify-content: space-between;
      padding: 0 20/360 * 100vw;
      font-size: 14/360 * 100vw;
      .wrap {
        display: flex;
        align-items: center;
        .head_png {
          width: 20/360 * 100vw;
          height: 20/360 * 100vw;
          border-radius: 10/360 * 100vw;
        }
      }
      .followBtn {
        width: 60/360 * 100vw;
        height: 30/360 * 100vw;
        font-size: 14/360 * 100vw;
        line-height: 30/360 * 100vw;
        text-align: center;
        color: #afafaf;
        border: 1/360 * 100vw solid #afafaf;
        border-radius: 15/360 * 100vw;
        &.notfollowed {
          background-color: red;
          color: white;
          border: transparent;
        }
      }
    }

    .text {
      padding: 0 20/360 * 100vw;
      margin: 20/360 * 100vw 0;
      font-size: 16/360 * 100vw;
    }

    .info-like {
      display: flex;
      margin: 40/360 * 100vw -20/360 * 100vw 0;
      padding-bottom: 20/360 * 100vw;
      justify-content: space-around;
      border-bottom: 5/360 * 100vw solid #efefef;
      .like {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60/360 * 100vw;
        height: 30/360 * 100vw;
        font-size: 12/360 * 100vw;
        border: 1/360 * 100vw solid #afafaf;
        border-radius: 15/360 * 100vw;
        &.has_like {
          color: red;
        }
        .link {
          font-size: 14/360 * 100vw;
        }
      }

      .weixin {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70/360 * 100vw;
        height: 30/360 * 100vw;
        font-size: 12/360 * 100vw;
        border: 1/360 * 100vw solid #afafaf;
        border-radius: 15/360 * 100vw;
        i {
          color: green;
        }
      }
    }
  }

  //跟帖栏
  .follow {
    position: relative;
    width: 100%;
    .head {
      width: 100%;
      margin: 20/360 * 100vw 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .morefollow {
      margin: 30/360 * 100vw 0 100/360 * 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #afafaf;
      .more {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120/360 * 100vw;
        height: 30/360 * 100vw;
        border: 1/360 * 100vw solid #000;
        border-radius: 15/360 * 100vw;
        font-size: 14/360 * 100vw;
        color: #000;
      }
    }
  }

  // 底部栏
  .bottom {
    padding: 0 20/360 * 100vw;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .disable {
       height: 60/360*100vw;
       display: flex;
       align-items: center;
      .comment {
        width: 220/360*100vw;
        height: 40/360 * 100vw;
        padding: 10/360 * 100vw 20/360 * 100vw;
        outline: none;
        border: transparent;
        background-color: #d7d7d7;
        border-radius: 20/360 * 100vw;
      }
      .box {
        display: flex;
        width: 140/360 * 100vw;
        justify-content: space-around;
        .collect {
          color: yellow;
        }
        span {
          font-size: 26/360 * 100vw;
          &.message {
            position: relative;
            .num {
              display: flex;
              padding: 0 5/360*100vw;
              justify-content: center;
              align-items: center;
              position: absolute;
              top: -5/360 * 100vw;
              left: 5/360 * 100vw;
              height: 14/360 * 100vw;
              background-color: red;
              color: #fff;
              font-size: 10/360 * 100vw;
              border-radius: 15/360 * 100vw;
            }
          }
        }
      }
    }
    
    .enable {
      margin-top: 60/360*100vw;
      height: 120/360*100vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .comment {
        height: 120/360 * 100vw;
        padding: 10/360 * 100vw 20/360 * 100vw;
        outline: none;
        border: transparent;
        background-color: #d7d7d7;
        border-radius: 20/360 * 100vw;
      }

      .sell {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80/360*100vw;
        height: 40/360*100vw;
        margin-top: 80/360*100vw;
        background-color: red;
        color: white;
        border: transparent;
        border-radius: 20/360*100vw;
      }
    }
  }
}


</style>